<template>
  <div class="alarm-list" v-show="isShow">
    <div class="list-scroll-wrap" v-if="dylist.length>0">
      <!-- <cube-scroll
        ref="alarmscroll"
        :data="items"
        :options="options"
        @pulling-up="onPullingUp"
      > -->
        <div>
          <a class="article" v-for="(item,index) in dylist" :key="index" :href="item.url">
            <p class="exflow">{{item.title}}</p>
            <dl>
              <dt>
                <img :src="item.icon" onerror="this.src='https://img.myzx.cn/video/mysource/image/20200828/5f4869c55c8d2.png'" alt="" />
              </dt>
              <dd class="fr exflow3">{{item.brief}}</dd>
            </dl>
          </a>
        </div>
        <!--  下拉刷新  需要加上:cube-pulldown-wrapper  定位下拉盒子内容在content顶部 :style="pullDownStyle" -->
        <!-- <template slot="pulldown" slot-scope="props">
          <div v-if="props.pullDownRefresh" class="cube-pulldown-wrapper" :style="pullDownStyle"> -->
            <!--  自定义下拉刷新的内容   -->
            <!-- <div class="pulldown-content">
              <span v-if="props.beforePullDown">下拉刷新...</span>
              <div v-else>
                <span v-if="props.isPullingDown">正在更新...</span>
                <span v-else>更新成功</span>
              </div>
            </div>
          </div> -->
        <!-- </template> -->
        <!-- <template slot="pullup" slot-scope="props">
          <div v-if="props.pullUpLoad" class="cube-pullup-wrapper" style="height: 0.8rem">
            <p v-if="props.isPullUpLoad">加载中.....</p>
          </div>
        </template> -->
      <!-- </cube-scroll> -->
    </div>
    <dl class="masterless" align="center" v-else>
      <dt>
        <img src="../assets/none.png" alt />
      </dt>
      <dd>还没有任何内容哦～</dd>
    </dl>
  </div>
</template>

<script>
import { dynamic } from "../api/captch";
export default {
  props:{
    doctor_id: String,
    mobile: String
  },
  data() {
    return {
      dylist: {},
      isShow: false,
      page: 1,
      items: [1,2,3,4,5],
      options: {
        // pullDownRefresh: {
        //   threshold: 90,
        //   stop: 40,
        //   txt: '刷新成功'
        // },
        pullUpLoad: {
          threshold: 90,
            txt: {
              more: '上拉加载更多...',
              noMore: '已经到底啦～'
            }
        }
      }
    };
  }, 
  computed: {},
  created() {
    this._dynamic();
  },
  methods: {
    /* 上拉加载  */
    onPullingUp() {
      // this.page++;
      // this._dynamic()
      console.log("上拉加载" + this.items);
    // Mock async load.
    setTimeout(() => {
      if (Math.random() > 0.5) {
        // 如果有最新数据，数组末尾追加数据
        let newPage = [
          'I am line ' + ++this.itemIndex,
          'I am line ' + ++this.itemIndex,
          'I am line ' + ++this.itemIndex,
          'I am line ' + ++this.itemIndex,
          'I am line ' + ++this.itemIndex
        ];

        this.items = this.items.concat(newPage);
      } else {
        // 没有数据，结束此次刷新
        this.$refs.alarmscroll.forceUpdate();
      }
    }, 1000)
    },
    //卡片动态
    _dynamic() {
      dynamic(this.mobile, {
        limit: 10,
        page: this.page
      }).then(res => {
        console.log(res.data);
        this.isShow = true;
        this.dylist = res.data.list;
      });
    }
  },
  mounted(){
    // 挂载
    this._dynamic();
  },
};
</script>
<style scoped>
.exflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.exflow2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.exflow3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.article {
  display: block;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  margin: 30px;
  color: #666666;
}
.article p {
  width: 100%;
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 25px;
}
.article dt,
.article dd {
  display: inline-block;
}
.article img {
  width: 160px;
  height: 160px;
  border-radius: 20px;
  background-color: #dddddd;
  object-fit: cover;
}
.article dd {
  float: right;
  width: 410px;
  margin-top: 15px;
  line-height: 43px;
}
.masterless {
  margin: 55px 0;
  font-size: 36px;
}
.masterless img {
  width: 287px;
  margin-bottom: 20px;
}
.dynamic {
  height: 100%;
}
.alarm-list {
 max-height: 100vh;
}

/* .select-group {
        height: 1.5rem;
    } */
/* .select-group {
        height: 1.5rem;
    } */

.list-scroll-wrap {
  /* height: calc(100vh - 70px); */
  /* background: lavender; */
}
/* .list-scroll-wrap .item {
  height: 1.8rem;
  background: lightblue;
  margin: 0.3rem;
}
.list-scroll-wrap .item:nth-child(1) {
  margin-top: 0;
} */
.alarm-list>>> .cube-scroll-list-wrapper{
  /* min-height: calc(520px - 30px)!important; */
}
.alarm-list>>> .cube-pullup-wrapper{
  color: #999;
}
</style>